import Vue from 'vue';
import css from './style.module.css';
import svgicon from '@base/svg-icon';

var _index123 = 2000;
var createDialogConstructor = (options) => {
  var _components = {
    modify: options?.components?.modify,
  };
  
  if (options?.components?.footer) {
    _components['footer'] = options?.components?.footer;
  }

  return Vue.extend({
    components: _components,
    methods: {
      clickcancel() {
        this.visual = false;
        options?._promiseObj.resolve({success:false})
      },
      
      async triggerSubmit() {
        var modifyRef = this.$refs['modifyRef'];
        var result=await (modifyRef?.submitByDialog())
        if(result&&result.success){
         options?._promiseObj.resolve(result)
         this.$data.visual=false
        }
      },
      
    },
    data() {
      return {
        visual: true,
      };
    },
    mounted() {
    
    var self=this;
      this.$nextTick(()=>{
     setTimeout(()=>{
       var modifyRef = this.$refs['modifyRef'];
       modifyRef?.initByDialog({
        dialogCom:self,
        ...options?.data?.()
       })
     },100)
      })
      
    },
    
    render(h) {
      return (this.$data.visual && <section
          vMyselfDialogDrag
          vFixedHeightPosition={{ fixedHeight: options.fixedHeight }}
          class={[css?.dialogcontainer, 'el-dialog']}
           style={{width:options?.width,top:options?.top,'z-index':_index123}}
          >
          <div class={[css?.title, 'el-dialog__header']}>
            <span>{options?.title || '标题'}</span>
            <div onClick={() => {
              this.clickcancel();
            }}>
              <svgicon iconClass={'close-circle'}
                       className={[css.title_closesvg]}></svgicon>
            </div>
          
          </div>
          <div class={['el-dialog__body', css.container]}>
            <modify ref={'modifyRef'}></modify>
          </div>
          <div class={[css.footer, 'el-dialog__footer']}>
            {/*存在footer 渲染*/}
            {options?.components?.footer && (
              <footer ref={'footerRef'}></footer>
            )}
            {(!options?.components?.footer) && (
              <div class={css.basefooter}>
                <el-button size={'mini'} onClick={this.clickcancel}>取消</el-button>
                <el-button size={'mini'} type={'primary'}
                           onClick={() => {
                             this.triggerSubmit();
                           }}
                >保存
                </el-button>
              </div>
            )}
          </div>
        </section>
      );
    },
  });
};

export function openLayer(options) {
  var _promiseObj={
    resolve:undefined,
    reject:undefined
  }
  options._promiseObj=_promiseObj;
  var DialogConstructor = createDialogConstructor(options);
  var wrapperDialogDom = new DialogConstructor();
  var $dom = wrapperDialogDom.$mount();
  
  $(  window._vm.$el||document.documentElement).append($dom.$el);
  _index123++;
  
  return new Promise((resolve,reject) => {
    _promiseObj.resolve=resolve
    _promiseObj.reject=reject
    
  })

}
